<template>
		<view class="">
			<uni-nav-bar
			statusBar="true" 
			:fixed="true" 
			:border="false"
			 :leftIcons="true"
			backgroundColor="#1D7DFF"
			leftIcon="back"
			@click-left="back"
			color="#ffffff">
				<view class="index-top-nav-title">
					<view class="">{{curInfo.title}}</view>
					<!-- <text @tap.stop="jumpList" class="iconfonts">{{i18n.bili}}</text> -->
				</view>
			</uni-nav-bar>
		<view class="fund-live-title">
			<view class="fund-live-title-top">
				{{i18n.Net_asset_valuation}} <view>{{curInfo.coin}}</view>
			</view>
			<view class="fund-live-title-center">
				{{total_btc}}
			</view>
		</view>
		<view class="fund-live-content-tip">
			<view class="fund-live-tip">
				<view class="fund-live-title-bottom-item">
					<text>{{i18n.Contract_days}}({{curInfo.coin}})</text>
					<view>{{curInfo.day}}</view>
				</view>
				<view class="fund-live-title-bottom-item">
					<text>{{i18n.Daily_profit_rate}}({{curInfo.coin}})</text>
					<view>{{curInfo.sl}}</view>
				</view>
			</view>
		</view>
	<view class="fund-live-list-content-nav">
		<text :class="{'active':actId == 0}" @tap.stop="selectActId('0')">{{i18n.Transfer_into}}</text>
		<text :class="{'active':actId == 1}" @tap.stop="selectActId('1')" v-if="curInfo.type==2">{{i18n.Transfer_out}}</text>
	</view>
		<view class="fund-live-list-content">
			<view class="fund-bing">
				{{i18n.AvailableBalance}} : {{curList.length?(curList[0].financial |formatParsefloat):''}} {{curInfo.coin}}
			</view>
			<template v-if="actId == 1">
				<view class="fund-buy-list">
					<!-- <template v-if="fieList.lenght>0"> -->
						<block v-for="(item,index) in fieList" :key="index" v-if="fieList.length>0">
							<view class="fund-buy-list-item"  @tap.stop="checkSlect(index)" v-if="item.status!=0">						
								<view>
									<text class="iconfont" :class="[item.istrue?'icon-xuanzhong active':'icon-yuanhuan']">{{item.title}}</text></view>  <text>{{item.token_num }}</text>
							</view> 
						</block>
						<text v-if="fieList.length=='0'" class="fund-buy-list-no">{{i18n.fund_live_list_tip001}}</text>
				<!-- 	</template>
					<template v-else>
						<text>暂未购买套餐</text>
					</template> -->
					
				</view>
			</template>
			
			<view class="fund-live-list-content-input">
				<input type="number" value="" :placeholder="i18n.p_enter_numbers" v-model="num"/>
				<text class="iconfont icon-cha" @tap.stop="num=''"></text>
				<!-- <text class="all">{{i18n.all}}</text> -->
			</view>
			<!-- <view cvlass="fund-live-list-content-input-tip"> -->
				<!-- 预计收益到账时间10月15日，如在20：00前转入，1月18号到账 -->
			<!-- </view> -->
			<view class="fund-live-list-content-input2">
				<input type="text" password value="" :placeholder="i18n.p_paypwd" v-model="paypwd" maxlength="6"/>
			</view>
			<view class="fund-live-list-content-btn" @tap.stop="subs">
				{{actId==0?i18n.Confirm_transfer:i18n.Confirm_transfer_out}}
			</view> 
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import Toast from '@/components/toast/toast.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uniIcon from "@/components/uni-icon/uni-icon"
	import Load from '../../components/common/load.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js';
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		data() {
			return {
				curInfo:{},
				actId:'',
				liveCurId:'',
				num:'',
				passwords:true,
				paypwd:null,
				liveCurlist:[],
				regularCurId:'',
				regularCurlist:[],
				isClick:false,
				curList:[],
				news:[{title:'222222222'}],
				day_sum:'',
				sum:'',
				total_btc:'',
				fieList:[],
				showLoad:false
			}
		},
		onShow() {
			this.curInfo = JSON.parse(this.getPackages)
			console.log(this.curInfo );
			if(this.curInfo.type==1){
				this.actId = 0;
			}
			this.empty();
			this.getWallet();
			this.getEteails()
		},
		onNavigationBarButtonTap(e) {
			console.log(e);
			if(e.index==0){
				this.jumpList()
			}
		},
		computed:{
			formatParsefloat(val){
				if ((!val && val != 0) || val == null || val == undefined || val == 'undefined') {
					return 0
				}
				return parseFloat(val)
			},
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang',
				'getPackages'
			])
		},
		components:{
			Toast,uniNavBar,Load,uniIcon
		},
		methods:{
			checkSlect(ind){
				if(this.fieList[ind].istrue){
					for (var i = 0; i < this.fieList.length; i++) {
						this.fieList[i].istrue = false;
						this.$forceUpdate()
					}
				}else{
					for (var i = 0; i < this.fieList.length; i++) {
						this.fieList[i].istrue = false;
					}
					this.fieList[ind].istrue = true
					this.$forceUpdate()
				}
			},
			getEteails(){
				let url = this.getRequestUrl + '/api/Shop/tz_list';
				let _data = {
					id : this.getLoginInfo.id,
					token : this.getLoginInfo.token,
					status:this.curInfo.type==2?2:1
				}
				fetch(url,_data,"POST").then(res=>{
					if(res.data.code){
						this.day_sum = res.data.data.day_sum+''
						this.sum = res.data.data.sum+''
						this.fieList = res.data.data
						this.fieList = res.data.data.filter((item,index)=>{
							return res.data.data[index].title == this.curInfo.title
						})
						this.fieList.forEach((item,index)=>{
							this.fieList[index].istrue = false
						})
						console.log(this.fieList);
					} 
				})
			},
			getWallet(){
				let url = this.getRequestUrl + "/api/wallet/wallet_list";
				let _data = {
					id : this.getLoginInfo.id,
					token : this.getLoginInfo.token
				}
				fetch(url,_data,"POST").then(res=>{
					if(res.data.code){
						this.total_btc =  (parseInt(res.data.data.total_btc*10000)/10000).toFixed(4) + ''
						let list = res.data.data.list;
						list = list.filter((item)=>{ 
							return item.title_en == this.curInfo.coin
						})
						this.curList = list;
						
						console.log(list);  
					} 
				})
			},
			subs(){
				let mssage=null
				// console.log(this.actId);
				if (!this.num) {
					showToast(this.i18n.p_enter_numbers)
					return
				}
				if (!this.paypwd) {
					showToast(this.i18n.p_paypwd)
					return
				}
				if(this.actId==1){
					mssage = this.i18n.p_enter_transfer_out;
				}else{
					mssage = this.i18n.p_enter_transfer_s;
					
				}
				let _this = this
				uni.showModal({
				    title: _this.i18n.messgae,
				    content: mssage,
				    success: function (res) {
				        if (res.confirm) {
							// console.log('1111');
							mssage=null
				            _this.submit()
				        } else if (res.cancel) {
							mssage=null
				            // console.log('用户点击取消');
				        }
				    }
				});
			},
			submit(){
				if(this.isClick){return}
				let _data,url,lsit
				
				if(this.actId==1){
					lsit = this.fieList.filter((item,index)=>{
						return this.fieList[index].istrue == true
					})
					if(lsit.length==0){
						return
					}
					url = this.getRequestUrl + '/api/shop/over';
					_data = {
						id: this.getLoginInfo.id,
						token: this.getLoginInfo.token,
						num:this.num,
						shopid: lsit[0].id,
						paypwd: this.paypwd
						
						
						
						// id: this.getLoginInfo.id,
						// token: this.getLoginInfo.token,
						// lang_type: this.getLang=='en'?2:1,
						// paypwd: this.paypwd,
						// num:this.num,
						// shopid: lsit[0].id,
						// token_id: this.curInfo.token_id
					}
				}else{
					url = this.getRequestUrl + '/api/shop/buy_shop';
					_data = {
						id: this.getLoginInfo.id,
						token: this.getLoginInfo.token,
						lang_type: this.getLang=='en'?2:1,
						paypwd: this.paypwd,
						num:this.num,
						shopid: this.curInfo.id,
						token_id: this.curInfo.token_id
					}
					
				}
				this.isClick = true;
				this.showLoad = true;
				fetch(url, _data, 'post')
					.then(res => {
						this.empty()
						// console.log(res)
						// uni.hideLoading()
						if (res.statusCode == 200 && res.data.code == 1) {
							uni.switchTab({
								url:'/pages/fund/fund'
							})
						}
						showToast(res.data.msg)
					})
					.catch(err => {
						this.empty()
						console.log(err)
					})
			},
			passwort(){
				console.log(this.passwords);
				this.passwords = !this.passwords;
			},
			empty(){
				this.num = null;
				this.paypwd = null;
				this.showLoad = false;
				this.isClick = false;
			},
			selectActId(num){
				this.actId = num
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			jumpList(){
				uni.navigateTo({
					url:'/pages/fund/list'
				})
			}
		}
	}
	
</script>
<style>
	page{
		background-color: #f3f2f9;
	}
</style>
<style lang="scss" scoped>
	.index-top-nav-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		view{
			font-size:36upx;
			font-weight: bold;
		}
		text{
			font-size:26upx;
			font-weight: 100;
		}
	}
	.fund-live-title{
		background-color: #1D7DFF;
		color: #FFFFFF;
		padding: 10upx 0 44upx 0;
		position: relative;
		.fund-live-title-top{
			text-align: center;
			font-size: 24upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #B0C9FF;
			view{
				display: flex;
				margin-left: 12upx;
				justify-content: space-between;
				align-items: center;
				// border: 2upx solid #FFFFFF;
				// padding: 8upx 30upx 8upx 8upx;
				// font-size: 24upx;
				width: 120upx;
				text{
					font-size: 26upx;
					font-weight: 100;
					color: #FFFFFF;
				}
			}
		}
		.fund-live-title-center{
			font-size: 60upx;
			font-weight: bold;
			text-align: center;
			padding:46upx 0 56upx 0;
		}
	}
	.fund-live-content-tip{
		// border-top: 140upx solid #f0f0f0;
		// border-bottom: 26upx solid #f0f0f0;
		position: relative;
		// padding: 0 30upx 26upx;
		height:120upx;
		transform: translateY(-100%);
		// background-color: #f0f0f0;
		.fund-live-tip{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFFFFF;
			border-radius: 10upx;
			position: absolute;
			width: 690upx;
			left: 50%;
			transform: translate(-50%,30%);
			top: 0;
			display: flex;
			align-items: center;
			margin-bottom: -20upx;
			padding: 26upx 0;
			box-shadow: 2upx 2upx 10upx #e3e3e3;
			.fund-live-title-bottom-item{
				&:first-of-type{
					position: relative;
					&::after{
						position: absolute;
						right: 0;
						top: 0;
						height: 100%;
						width: 2upx;
						content:"";
						background-color: #a4a4a4;
					}
				}
				color: #282828;
				flex: 1;
				text-align: center;
				text{
					font-size: 24upx;
				}
				view{
					font-size: 44upx;
					font-weight: bold;
				}
			}
		}
	}
	.fund-live-list-content-nav{
		display: flex;
		align-items: center;
		text{ 
			line-height: 88upx;
			color: #7A8DAE;
			// flex: 1;
			margin-left: 30upx;
			text-align: center;
			font-size: 34upx;
			font-weight: bold;
			&.active{
				// background-color: #5B616A;
				font-size: 50upx;
				color: #337BFE;
			}
		}
	}
	.fund-live-list-content{
		background-color: #FFFFFF;
		border-top-left-radius:20upx ;
		border-top-right-radius:20upx ;
		padding-top: 40upx;
		.fund-bing{
			padding: 0 30upx;
		}
		.fund-buy-list{
			.fund-buy-list-no{
				padding-left: 30upx;
				color: #7a8dae;
				font-size: 26upx;
			}
			.fund-buy-list-item{
				display: flex;
				justify-content: space-between;
				padding:20upx;
				align-items: center;
				view{
					text{
						margin-left:20upx;
						&.active{
							color: #1d7dff;
						}
					}
				}
			}
		}
		.fund-live-list-content-input{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border: 1upx solid #888f9c;
			margin: 40upx 30upx 25upx;
			input{
				flex: 1;
				line-height: 96upx;
				height: 96upx;
				padding-left: 20upx;
			}
			text{
				&.iconfont{
					font-size: 30upx;
					width: 36upx;
					height:36upx;
					margin-right: 80upx;
					background-color: #b8bbc0;
					border-radius: 18upx;
					line-height: 36upx;
					text-align: center;
					color:#FFFFFF;
				}
				&.all{
					font-size: 28upx;
					margin-right: 40upx;
				}
			}
		}
		.fund-live-list-content-input-tip{
			font-size: 20upx;
			color: #7d7d7d;
			padding:20upx 30upx;
		}
		.fund-live-list-content-input2{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border: 1upx solid #888f9c;
			margin: 30upx 30upx 25upx;
			input{
				flex: 1;
				line-height: 96upx;
				height: 96upx;
				padding-left: 20upx;
			}
			text{
				&.iconfont{
					font-size: 30upx;
					width: 36upx;
					height:36upx;
					margin: 0 40upx;
					// background-color: #b8bbc0;
					color: #1d7dff;
					border-radius: 18upx;
					line-height: 36upx;
					text-align: center;
					&.icon-yanjing2{
						color: #b8bbc0;
					}
				}
			}
		}
		.fund-live-list-content-btn{
			margin: 40upx 30upx;
			font-size: 28upx;
			color: #FFFFFF;
			background-color: #166AFE;
			line-height: 76upx;
			text-align: center;
			border-radius: 8upx;
			&.hover-transform1{
				opacity: .95;
				transform: scale(.95);
			}
		}
	}
</style>